/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-12-11 22:44:22
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-12-12 15:31:13
 * @FilePath: /tuberculosis_screening_app/src/components/common/Cell/Cell.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { defineComponent } from 'vue';
export default defineComponent({
  props: {
    label: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
    },
    justify: {
      type: Boolean,
      default: false
    },
    contentAlign: {
      type: Boolean,
    }
  },

  setup(props, { slots, attrs }) {

    const classNames = ['cell']
    if(props.justify) {
      classNames.push('justify')
    }
    if(props.contentAlign === 'left') {
      classNames.push('align-left')
    }else if(props.contentAlign === 'right') {
      classNames.push('align-right')
    }
    if (attrs.class) {
      classNames.push(attrs.class)
    }

    return () => (
      <>
        <div className={classNames.join(' ')}>
        <div className="title" style={{ width: `${props.width}px` }}>{props.label}</div>
        <div className="content"> {slots.default?.()}</div>
      </div>
      </>
    )
  }
});